<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
@@include('header.inc')
<body>
<script type="text/javascript">
    var contextPath = '[[${#request.getContextPath()}]]';
</script>
<div class="globalbar">
	<div class="wrap">
		<p class="toplink" id="userStatus">
			<span v-text="userEmail"></span>|
			<span><a href="#">退出</a></span>|
			<span><a href="#">登录</a></span>|
			<span><a href="#">注册</a></span>|
			<span><a href="#">帮助中心</a></span>
		</p>
		<div class="logo"><a th:href="@{/index.htm}" title="网易购卡充值中心">网易购卡充值中心</a></div>
		<div class="nav">
			<ul>
				<li class="on"><a href="#" >首页</a></li>
				<li><a href="#">充值购卡</a></li>
				<li><a href="#">积分商城</a></li>
				<li><a href="#">我的帐户</a></li>
			</ul>
		</div>
		
	</div>
</div>
<div class="focus">
	<div class="focus-pic">
		<div class="banner">
			<ul class="slides">
				<li>
					<a href="#" title="预约等其他广告词"  style="background:url(images/pic/focus01.jpg) no-repeat center center;" ></a>
				</li>
				<li>
					<a href="#" title="预约等其他广告词"  style="background:url(images/pic/focus01.jpg) no-repeat center center;"></a>
				</li>
				<li>
					<a href="#" title="预约等其他广告词"  style="background:url(images/pic/focus01.jpg) no-repeat center center;"></a>
				</li>
			</ul>
		</div>
	</div>
	<!--<div class="focus-pic">-->

		<!--<ul>-->
			<!--<li>-->
				<!--<a href="#" title="预约等其他广告词" style="background:url(../images/pic/focus01.jpg) no-repeat center center;"></a>-->
			<!--</li>-->
		<!--</ul>-->
	<!--</div>-->
	<div class="focus-news" id="newsContainer">
		<div class="focus-news-title">
			<h2>最新消息</h2>
			<span><a  @click="showMore" th:href="@{/news-list.htm}" v-text="showMoreMsg"></a><i class="icon icon_more"></i></span>
		</div>
		<h3><a href="#">大神回归六重大奖连环赏六重，大神回国</a></h3>
		<ul>
			<li v-for="(news,index) in newsList" @click="showMore"><a href="#" v-text="news"></a></li>
			<!--<li><a href="#" v-text="news">大话2经典版、免费版充值送大礼</a></li>-->
			<!--<li><a href="#">1月10日23点-1月11日7点工商银行</a></li>-->
			<!--<li><a href="#">在线购卡价格调整公告</a></li>-->
			<!--<li><a href="#">大话2经典版、免费版充值送大礼</a></li>-->
			<!--<li><a href="#">1月10日23点-1月11日7点工商银行</a></li>-->
		<!--</ul>-->
	</div>
	<div class="focus-nav">
		<ul>
			<li class="on"><a href="#">有杀气童话</a></li>
			<li><a href="#">神魔决</a></li>
			<li><a href="#">天下3</a></li>
			<li><a href="#">魔兽世界</a></li>
			<li><a href="#">恶魔不要啊</a></li>
		</ul>
	</div>
</div>
<div class="section-bg">
	<div class="games wrap">
		<h2 class="section-title">充值产品</h2>
		<div class="games-tab">
			<ul>
				<li class="on"><a href="javascript:;"><i class="icon icon_hot"></i>热门</a></li>
				<li><a href="javascript:;"><i class="icon icon_desktop"></i>端游</a></li>
				<li><a href="javascript:;"><i class="icon icon_mobile"></i>手游</a></li>
				<li><a href="javascript:;"><i class="icon icon_other"></i>其他产品</a></li>
			</ul>
		</div>
		<div class="games-cont">
			<table width="100%" class="tb_games" cellpadding="0" cellspacing="0">
				<tr>
					<td>
						<div class="games-cont-item">
							<a href="#">
								<img src="images/pic/game01-logo.png" height="76" width="104">
								<!-- 新游戏显示以下图标 -->
								<i class="icon icon_corner_new"></i>
								<!-- 有二维码的手游显示以下图标 -->
								<i class="icon icon_qrcode"></i>
								<h3>口袋侏罗纪</h3>
							</a>
							<!-- 显示大二维码图标，注意二维码尺寸 -->
							<div class="games-qrcode">
								<i class="icon icon_corner_top"></i>
								<img src="images/pic/qrcode-big.png" height="232" width="232">
							</div>
						</div>
					</td>
					<td>
						<div class="games-cont-item">
							<a href="#">
								<img src="images/pic/game02-logo.png" height="63" width="150">
								<!-- 新游戏显示以下图标 -->
								<i class="icon icon_corner_new"></i>
								<!-- 有二维码的手游显示以下图标 -->
								<i class="icon icon_qrcode"></i>
								<h3>恶魔不要啊</h3>
							</a>
							<!-- 显示大二维码图标，注意二维码尺寸 -->
							<div class="games-qrcode">
								<i class="icon icon_corner_top"></i>
								<img src="images/pic/qrcode-big.png" height="232" width="232">
							</div>
						</div>
					</td>
					<td>
						<div class="games-cont-item">
							<a href="#">
								<img src="images/pic/game03-logo.png" height="69" width="131">
								<h3>魔兽世界</h3>
							</a>
						</div>
					</td>
					<td>
						<div class="games-cont-item">
							<a href="#">
								<img src="images/pic/game04-logo.png" height="59" width="132">
								<h3>魔兽世界</h3>		
							</a>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="games-cont-item">
							<a href="#">
								<img src="images/pic/game01-logo.png" height="76" width="104">
								<h3>魔兽世界</h3>
							</a>
						</div>
					</td>
					<td>
						<div class="games-cont-item">
							<a href="#">
								<img th:src="@{/images/pic/game02-logo.png}" height="63" width="150">
								<h3>魔兽世界</h3>
							</a>
						</div>
					</td>
					<td>
						<div class="games-cont-item">
							<a href="#">
								<img th:src="@{/images/pic/game03-logo.png}" height="69" width="131">
								<h3>魔兽世界</h3>
							</a>
						</div>
					</td>
					<td>
						<div class="games-cont-item">
							<a href="#">
								<img th:src="@{/images/pic/game04-logo.png}" height="59" width="132">
								<h3>魔兽世界</h3>		
							</a>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="games-cont-item">
							<a href="#">
								<img th:src="@{/images/pic/game01-logo.png}" height="76" width="104">
								<h3>魔兽世界</h3>
							</a>
						</div>
					</td>
					<td>
						<div class="games-cont-item">
							<a href="#">
								<img  th:src="@{/images/pic/game02-logo.png}" height="63" width="150">
								<h3>魔兽世界</h3>
							</a>
						</div>
					</td>
					<td>

					</td>
					<td>

					</td>
				</tr>
			</table>
		</div>
	</div>
	<div class="blank24"></div>
	<div class="blank24"></div>
</div>
@@include('help-charge.inc')
<div class="footer">
	<script charset="gb2312" type="text/javascript" src="http://res.nie.netease.com/comm/NIE_copyRight/NIE_copyRight.js"></script>
</div>
<script th:src="@{/js/common.js}"></script>
<script th:src="@{/js/main.js}"></script>
</body>
</html>
